<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
const login = ref(null)
const router = useRouter()
const userStore = useUserStore()
function open() {
  login.value.open()
}
function gotoURL(url) {
  if (url === '/') {
    router.push({ path: url })
  } else {
    if (userStore.token) {
      router.push({ path: url })
    } else {
      open()
    }
  }
}
</script>

<template>
  <div class="side-bar">
    <ul>
      <!-- prettier-ignore -->
      <li :class="{active:$route.path == '/'}" @click="gotoURL('/')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-home"></use>
          </svg>首页</li>
      <!-- prettier-ignore -->
      <li :class="{active:$route.path == '/album'}" @click="gotoURL('/album')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiangce"></use>
          </svg>相册</li>
      <!-- prettier-ignore -->
      <li :class="{active:$route.path == '/post'}" @click="gotoURL('/post')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tianjia"></use>
          </svg>发布</li>
    </ul>
    <div class="button" @click="open" v-if="!userStore.token">登录</div>
    <Login ref="login"></Login>
    <div class="floating-box">
      <div class="title">修勾日记</div>
      <!-- prettier-ignore -->
      <div class="desc">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-good"></use>
        </svg>记录日常生活
      </div>
      <!-- prettier-ignore -->
      <div class="desc">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg>记录每一分每一秒
      </div>
      <!-- prettier-ignore -->
      <div class="desc">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-chat"></use>
        </svg>一起来互动、交流吧
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.side-bar {
  margin-top: 72px;
  background-color: var(--color-background);
  height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  padding-top: 16px;
  position: fixed;

  li {
    padding-left: 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    border-radius: 999px;
    color: var(--color-primary-label);
    font-weight: 600;
    cursor: pointer;
    .icon {
      margin-right: 16px;
    }
    &.active,&:hover {
      background-color: var(--color-active-background);
    }
    transition: background-color 0.5s;
  }

  .button {
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    margin-bottom: 8px;
  }

  .floating-box {
    cursor: pointer;
    width: 100%;
    padding: 16px;
    height: 155px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;

    .title {
      font-size: 14px;
      font-weight: 500;
      color: var(--color-primary-label);
      margin-bottom: 12px;
    }

    .desc {
      color: var(--color-tertiary-label);
      font-size: 14px;
      margin: 5px 0;

      .icon {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
    }
  }

  .userInfo {
    color: var(--color-primary-label);
    .name {
      font-size: 16px;
      font-weight: 600;
    }
  }
}
</style>
